<template>
	<el-dialog
		title="更新资源包"
		:visible="visible"
		width="600px"
		:before-close="handleClose"
		@close="handleClose"
		:close-on-click-modal="false"
		center
	>
		<el-form ref="form" label-width="120px" @submit.native.prevent>
			<el-form-item label="资源包类型:" class="is-required">
				<el-input
					v-model="typeName"
					:disabled="true"
					style="width: 230px"
				></el-input>
			</el-form-item>
			<el-form-item label="版本号:" class="is-required">
				<el-input
					clearable
					v-model="version"
					:maxlength="20"
					style="width: 230px"
					@blur="handleCheckVersion"
					v-input="{ name: 'num_point' }"
					@clear="handleClear"
				></el-input>
				<div class="show-form-tips" v-if="versionTips">
					{{ versionTips }}
				</div>
			</el-form-item>
			<el-form-item label="资源包文件:" class="is-required">
				<el-upload
					drag
					action="#"
					:show-file-list="false"
					:auto-upload="true"
					:on-progress="handleOnProgress"
					:on-change="handleOnChange"
					:http-request="() => {}"
					:disabled="isUploadDisabled"
					:before-upload="handleOnBeforeUpload"
				>
					<div class="el-upload__text">
						<div class="show-content">
							<i class="el-icon-upload el-icon-new"></i>
							<span>点击或将文件拖拽到这里上传</span>
						</div>
					</div>
					<div class="show-tips">
						仅支持zip文件，不超过100M
					</div>
				</el-upload>
				<div class="el-upload__tip">
					<div v-if="uploadFileName" class="show-file-info">
						<span>
							{{ uploadFileName || '' }}
						</span>
						<span style="float:right;">
							<i
								class="el-icon-close"
								style="cursor: pointer;"
								@click.stop="handleOnDelete"
							></i>
						</span>
					</div>
					<el-progress
						v-if="isUploadDisabled"
						:percentage="uploadPercent"
						style="width:400px;"
					></el-progress>
				</div>
			</el-form-item>
		</el-form>

		<template v-slot:footer>
			<div class="dialog-footer">
				<el-button @click="handleClose">取消</el-button>
				<el-button
					type="primary"
					@click="handleSubmit"
					:disabled="
						isSubmitDisabled ||
							!isUpdateVersionFlag ||
							!isUpdateUploadFlag
					"
				>
					更新
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script>
import list from '@/mixins/list'
export default {
	mixins: [list],
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		detail: {
			type: Object,
			default: {}
		},
		resourceTypeArr: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
			isSubmitDisabled: false,
			isUploadDisabled: false,
			isUpdateVersionFlag: false,
			isUpdateUploadFlag: false,
			typeName: this.getTypeName(this.detail.type, this.resourceTypeArr),
			version: '',
			uploadFile: '',
			uploadFileName: '',
			submitForm: {},
			submitLoading: false,
			uploadPercent: 0,
			versionTips: '',
			maxPackageSize: this.detail.maxPackageSize || 100 * 1024 * 1024
		}
	},
	methods: {
		handleClear() {
			this.isUpdateVersionFlag = false
		},
		// 上传前
		handleOnBeforeUpload() {
			this.uploadFile = ''
		},
		// 上传文件
		handleOnChange(file, fileList) {
			this.isUpdateUploadFlag = false
			if (!file) {
				return
			}
			this.uploadFile = file
			this.uploadFileName = this.uploadFile.name

			// 文件类型校验
			const fileSuffixArr = file.name?.split('.')
			if (fileSuffixArr[1].toLowerCase() !== 'zip') {
				this.uploadFileName = ''
				this.$message.closeAll()
				this.$message.warning('仅支持ZIP文件')
				return
			}
			if (file.size > this.maxPackageSize) {
				this.uploadFileName = ''
				this.$message.closeAll()
				this.$message.warning('文件超过100M，不能上传')
				return
			}
			const formData = new FormData()
			formData.append('file', this.uploadFile?.raw)
			formData.append('packageId', this.detail.type)
			this.isUploadDisabled = true
			this.uploadPercent = 0
			this.$api
				.uploadResourcePackageBend(formData, this.handleOnProgress)
				.then((res) => {
					if (res?.data.filePath != undefined) {
						this.submitForm = { ...res?.data }
						this.uploadFile = ''
						this.isUpdateUploadFlag = true
						this.isUploadDisabled = false
					}
				})
				.catch(() => {
					this.isUploadDisabled = false
					this.uploadFileName = ''
				})
		},
		// 滚动条
		handleOnProgress(progress) {
			this.uploadPercent = progress
		},
		// 删除上传
		handleOnDelete() {
			this.uploadFile = ''
			this.uploadFileName = ''
			this.isUploadDisabled = false
			this.isUpdateUploadFlag = false
			this.uploadPercent = 0
			this.submitForm = {}
		},
		// 更新版本数据
		handleSubmit() {
			if (!this.version || !this.submitForm?.filePath) {
				return
			}
			this.submitForm.packageId = this.detail.type
			this.submitForm.version = this.version
			this.isSubmitDisabled = true
			this.$api
				.updateResourcePackageBend({ ...this.submitForm })
				.then((res) => {
					this.isSubmitDisabled = false
					this.$message.warning('更新成功')
					this.handleClose()
					this.$emit('loadData')
				})
				.catch(() => {
					this.isSubmitDisabled = false
				})
		},
		// 校验版本号
		handleCheckVersion() {
			this.isUpdateVersionFlag = false
			this.versionTips = ''
			if (this.version === '') {
				this.versionTips = '版本号不能为空'
				return false
			}
			const params = this.getParams({
				packageId: this.detail.type,
				version: this.version
			})
			this.$api
				.getResourcePackageVersionListBend(params)
				.then((res) => {
					const record = res?.data?.record || []
					if (record.length > 0) {
						this.versionTips = '版本号重复'
					} else {
						this.isUpdateVersionFlag = true
					}
				})
				.catch(() => {
					this.isUpdateVersionFlag = true
				})
		},
		handleClose() {
			this.submitForm = {}
			this.$emit('update:visible', false)
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
.show-form-tips {
	color: #f56c6c;
	font-size: 12px;
	line-height: 1;
	padding-top: 4px;
	position: absolute;
	top: 100%;
	left: 0;
}
.show-content {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 60px;
}
.show-tips {
	color: red;
}
.el-icon-new {
	font-size: 35px;
	color: #c0c4cc;
	line-height: 35px;
	margin: 0;
	margin-right: 10px;
}
.show-file-info {
	display: inline-block;
	width: 370px;
}
</style>
